<!--  -->
<template>
  <div>
    <xl-header :isBack="true">
      {{ title }}
    </xl-header>
    <div class="container" style="padding:60px 0 0 0 ">
      <div class="goods-list">
        <div class="goods-items">
          <ul v-if="status == 'hasData'">
            <li v-for="item in goods_list" :key="item._id">
              <router-link :to="{path:'/goodsDetail',query:{goods_id:item._id}}">
                <em><img class="goods-img" :src="item.img" /></em>

                <div class="goods-info">
                  <p>{{ item.name }}</p>
                  <p class="price">￥{{ item.price }}</p>
                  <span
                    >{{ item.comment }}条评论
                    <i>{{ item.feedbackRate }}好评</i></span
                  >
                </div>
              </router-link>
            </li>
          </ul>

          <xlLoading v-if="status == 'loading'"></xlLoading>

          <xlempty v-if="status == 'empty'"></xlempty>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
//   初始化时  加载中
//  数据
//  发现 没数据   空的显示

import xlLoading from "@/components/xl-loading.vue";
import xlempty from "@/components/empty.vue";

export default {
  data() {
    return {
      goods_list: [],
      status: "loading",
    };
  },
  components: {
    xlLoading,
    xlempty,
  },
  computed: {
    cate_id() {
      return this.$route.query.cate_id;
    },
    title() {
      if (this.isHot) {
        return "热门商品";
      }
      if (this.isJingxuan) {
        return "精选商品";
      }
      return this.$route.query.title;
    },
    isHot() {
      return !!this.$route.query.isHot;
    },
    isJingxuan() {
      return !!this.$route.query.isJingxuan;
    },
  },
  mounted() {
    this.get_goods_list();
  },
  methods: {
    get_goods_list() {
      let { cate_id, isHot, isJingxuan } = this;

      let request = null;

      if (isHot) {
        request = this.$http.post("/api/get_hot");
        console.log("这是热门");
      } else if (isJingxuan) {
        request = this.$http.post("/api/get_jingxuan");
          console.log("精选");
      } else {
        request = this.$http.post("/api/get_goods_list", {
          cate_id,
        });
      }

      request.then((res) => {
        setTimeout((v) => {
          console.log(res);
          if (res.code == 1) {
            this.goods_list = res.data;
          }
          if (this.goods_list.length === 0) {
            this.status = "empty";
          } else {
            this.status = "hasData";
          }
        }, 500);
      });
    },
  },
};
</script>
<style lang='scss'>
.goods-list {
  background: #fff;
  margin-bottom: 10px;
}
.goods-items {
  overflow: hidden;
  padding: 5px 0;
  position: relative;
  min-width: 150px;
}
.goods-items li {
  overflow: hidden;
  padding: 5px 0;
  border-bottom: 1px solid #e1e5ee;
}
.goods-items li a {
  display: block;
  height: 100%;
  overflow: hidden;
  padding: 0 10px;
}
.goods-items em {
  width: 84px;
  height: 115px;
  float: left;
  margin-right: 5px;
}
.goods-items .goods-img {
  width: 84px;
  height: 115px;
}
.goods-items .goods-info {
  width: 200px;
  float: right;
}
.goods-items .goods-info span {
  line-height: 1.5;
}
.goods-items span:nth-child(2) {
  font-size: 16px;
}
.goods-items .price {
  font-size: 16px;
  color: #c30000;
  margin: 10px 0;
}
.goods-items span:last-child {
  color: #aaa;
  font-size: 12px;
}
.goods-items span i {
  font-style: normal;
  padding-left: 10px;
}
</style>